<template>
  <div>
    <div class="ele-page-header">
      <div class="ele-page-title">第三方配置</div>
      <div class="ele-page-desc">
        用于第三方平台场景。
      </div>
    </div>
    <div class="ele-body">
      <el-card shadow="never">

        <el-row :gutter="20"  style="margin-bottom: 20px;">
          <el-col :md="24" :sm="12" :xs="24">
            <el-alert type="info" :closable="false" class="ele-alert-border">
              <div class="ele-cell">
                <div class="ele-cell-content">
                  <div class="ele-cell-title"> <h5 style="margin: 5px 0 15px 0">授权事件接收配置</h5> </div>
                  <div class="ele-cell-desc"> <h6 style="margin-bottom: 10px">{{host +'/mobile/third/ticket'}} <el-link type="success" @click="copy_url(host +'/mobile/third/ticket')">复制</el-link></h6> </div>
                </div>
              </div>
            </el-alert>
          </el-col>
        </el-row>

        <el-row :gutter="20"  style="margin-bottom: 20px;">
          <el-col :md="24" :sm="12" :xs="24">
            <el-alert type="info" :closable="false" class="ele-alert-border">
              <div class="ele-cell">
                <div class="ele-cell-content">
                  <div class="ele-cell-title"> <h5 style="margin: 5px 0 15px 0">消息与事件接收配置</h5> </div>
                  <div class="ele-cell-desc"> <h6 style="margin-bottom: 10px">{{host +'/mobile/third/receive?appid=/$APPID$'}} <el-link type="success" @click="copy_url(host +'/mobile/third/receive?appid=/$APPID$')">复制</el-link></h6> </div>
                </div>
              </div>
            </el-alert>
          </el-col>
        </el-row>

        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="130px"
          style="max-width: 700px; margin: 10px auto"
        >
          <el-form-item  label="APPID:" prop="third_appid">
            <el-input v-model="form.third_appid" placeholder="请输入第三方平台APPID" clearable />
          </el-form-item>

          <el-form-item  label="appsecret:" prop="third_appsecret">
            <el-input v-model="form.third_appsecret" type="password" show-password placeholder="请输入第三方平台appsecret" clearable />
          </el-form-item>

          <el-form-item  label="消息校验Token:" prop="third_token">
            <el-input v-model="form.third_token" type="password" show-password placeholder="请输入第三方平台消息校验Token" clearable />
          </el-form-item>

          <el-form-item  label="消息加解密Key:" prop="third_encoding_aes_key">
            <el-input v-model="form.third_encoding_aes_key" type="password" show-password placeholder="请输入第三方平台消息加解密Key" clearable />
          </el-form-item>

          <el-form-item  label="模板id:" prop="third_template_id">
            <el-input v-model="form.third_template_id" placeholder="请输入第三方平台模板id" clearable />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" :loading="loading" @click="submit">
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
  // import { save ,query } from '@/api/system/config';
  export default {
    name: 'SysThird',
    data() {
      return {
        host:window.location.protocol + "//" +location.host,
        // 提交状态
        loading: false,
        // 表单数据
        form: {
          third_appid: '',
          third_appsecret: '',
          third_token:'',
          third_encoding_aes_key:'',
          third_template_id:'',
        },

        // 表单验证规则
        rules: {
          third_appid: [
            {
              required: true,
              message: '请输入第三方平台appid',
              trigger: 'blur'
            }
          ],
          third_appsecret: [
            {
              required: true,
              message: '请输入第三方平台appsecret',
              trigger: 'blur'
            }
          ],
          third_token: [
            {
              required: true,
              message: '请输入第三方平台消息校验Token',
              trigger: 'blur'
            }
          ],
          third_encoding_aes_key: [
            {
              required: true,
              message: '请输入第三方平台消息加解密Key',
              trigger: 'blur'
            }
          ],
        },

      };
    },
    methods: {
      copy_url(content){
       // window.clipboardData.setData('text', context);

        if (window.clipboardData) {
            /*
            window.clipboardData有三个方法:
          （1）clearData(sDataFormat) 删除剪贴板中指定格式的数据。sDataFormat:"text","url"
          （2）getData(sDataFormat) 从剪贴板获取指定格式的数据。 sDataFormat:"text","url"
          （3）setData(sDataFormat, sData) 给剪贴板赋予指定格式的数据。返回 true 表示操作成功。
            */
          window.clipboardData.setData('text', content);
        } else {
          (function (content) {
            //oncopy 事件在用户拷贝元素上的内容时触发。
            document.oncopy = function (e) {
              e.clipboardData.setData('text', content);
              e.preventDefault(); //取消事件的默认动作
              document.oncopy = null;
            }
          })(content);
          //execCommand方法是执行一个对当前文档/当前选择/给出范围的命令。
          //'Copy':将当前选中区复制到剪贴板。
          document.execCommand('Copy');
        }
        this.$message.success('复制成功！');
      },
      /* 提交 */
      submit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.loading = true;
            this.loading = true;
            save(this.form).then((msg) => {
              this.loading = false;
              this.$message.success(msg);
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
          } else {
            return false;
          }
        });
      },
    },
     mounted() {
      query({group:'third'}).then((msg) => {
        if(msg != null){
          this.form = msg;
        }
      }).catch((e) => {
        this.$message.error(e.message);
      });
     }

  };
</script>

<style scoped>
.el-form-item{
  margin-left: 100px;
}
</style>
